<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      console.log('接收值', this.data)
      // let data = this.data
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      let scaleData = this.data
      // 图表基础配置start
      var legend = {
        show: true,
        right: 30,
        top: 'center',
        align: 'left',
        itemGap: 15,
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 7,
        textStyle: {
          color: '#fff',
          rich: {
            name: {
              verticalAlign: 'right',
              align: 'left',
              width: 150,
              fontSize: 10,
              color: '#fff',
            },
            percent: {
              padding: [0, 0, 0, 8],
              color: '#fff',
            },
          },
          borderWidth: 53, // 间距的宽度
        },
        formatter: (name, index) => {
          // console.log(scaleData)
          const item = scaleData.find((i) => {
            return i.name === name
          })
          const value = item.value
          return `${name}  ${value}`
        },
      }
      // var rich = {
      //   white: {
      //     color: '#ddd',
      //     align: 'center',
      //     padding: [3, 0],
      //   },
      // }
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      }
      var data = []
      var color = ['#FE5656', '#01E17E', '#FFAD05']
      for (var i = 0; i < scaleData.length; i++) {
        data.push(
          {
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: '',
            itemStyle: placeHolderStyle,
          }
        )
      }
      var seriesObj = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [83, 88],
          center: ['40%', '45%'],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
                // position: 'outside',
                // color: '#ddd',
                // formatter: function (params) {
                //   var percent = 0
                //   var total = 0
                //   for (var i = 0; i < scaleData.length; i++) {
                //     total += scaleData[i].value
                //   }
                //   percent = ((params.value / total) * 100).toFixed(0)
                //   if (params.name !== '') {
                //     return params.name + '\n{white|' + '占比' + percent + '%}'
                //   } else {
                //     return ''
                //   }
                // },
                // rich: rich,
              },
              // labelLine: {
              //   length: 30,
              //   length2: 100,
              //   show: true,
              //   color: '#00ffff',
              // },
            },
          },
          data: data,
        },
      ]
      let option = {
        // backgroundColor: '#04243E',
        tooltip: {
          show: false,
        },
        legend: legend,
        toolbox: {
          show: false,
        },
        series: seriesObj,
      }

      myChart.setOption(option)
    },
  },
}
</script>
